import { isLoggedIn } from "@/service/axiosManager";
import { ResponseModal } from "@/service/request/modal/responseModal";
import { getToolsList } from "@/service/request/requestApi";
import { DatabaseOutlined, SearchOutlined } from "@ant-design/icons";
import { Menu, message, Popover } from "antd";
import MenuItem from "antd/es/menu/MenuItem";
import { useEffect, useState } from "react";
import { DeleteSvg } from "../assets/CustomizeSvg";
import { ToolDetail } from "@/service/request/modal/dataModal";
import { useMainContentContext } from "@/service/general/publicStatic";
import { UtilBoxDetail } from "./detail/UtilBoxDetail";

const UtilBoxView = () => {
    const [searchInputFocus, setSearchInputFocus] = useState<boolean>(false);
    const [loadData, setLoadData] = useState<boolean>(true);

    const [toolsList, setToolsList] = useState<ToolDetail[]>([]);

    const {to} = useMainContentContext();

    useEffect(() => {
        Initialize();
    });

    const Initialize = () => {
        if (isLoggedIn() && loadData) {
            setLoadData(false);
            loadToolsList();
        }
    }

    const loadToolsList = () => {
        getToolsList().then((res: ResponseModal<ToolDetail>) => {
            if (res.code === 0 && res.success) {
                setToolsList(res.result || []);
            } else {
                message.error(res.message || "获取工具箱列表失败");
            }
        }).catch((err) => {
            console.log("获取列表失败\n", err);
        });
    }

    const toDetail = (item: ToolDetail) => {
        const detailView = <UtilBoxDetail data={item} />;
        to(detailView);
    }

    return (<>
        <div className="dataset-view text-black">
            <div className="search">
                <div className="context-title">我的工具箱</div>
                <div className="search-input">
                    <div className="search-input-box hover:border hover:border-[#0D6EFD]/60" style={searchInputFocus ? {
                        borderWidth: "1px",
                        borderColor: "rgba(13, 110, 253, 0.6)",
                        boxShadow: '0 0 5px rgba(13,110,253, 0.4)',
                    }:{}}>
                        <SearchOutlined className="icon-search" />
                        <input type="text" 
                        onFocus={() => setSearchInputFocus(true)} 
                        onBlur={() => setSearchInputFocus(false)}
                        placeholder="工具箱名称" />
                    </div>
                </div>
            </div>
            <div className="context">
                {
                    toolsList && toolsList.length > 0 ? toolsList.map((item, index) => (
                        <div className="card-data" key={`dataset_list_${item.id}`} onClick={() => {toDetail(item)}}>
                            <div className="card-data-title">
                                <div className="title-info">
                                    <div className="icon-title"><DatabaseOutlined className="icon-data-title" /></div>
                                    <div className="data-name">{item.name}</div>
                                </div>
                            </div>
                            <div className="card-data-desc">
                                {item.intro || "这个工具还没有介绍~"}
                            </div>
                            {/* <div className="card-data-attr">
                                <div className="data-type card-bottom">
                                </div>
                                <div className="card-menu">
                                    <Popover content={<Menu style={{border: "0px"}}>
                                        <MenuItem>
                                            <div className="w-full h-full flex flex-row items-center justify-center" onClick={(event) => {event.stopPropagation();removeOption(item);}}>
                                                <div className="menu-item-icon menu-delete"><DeleteSvg width={`100%`} height={`100%`} /></div>
                                                <span className="menu-delete">删除</span>
                                            </div>
                                        </MenuItem>
                                    </Menu>} arrow={false} trigger="hover" placement="bottomLeft" getPopupContainer={(node) => node}>
                                        <div className="text-menu">...</div>
                                    </Popover>
                                </div>
                            </div> */}
                        </div>
                    )):(<div>暂无数据</div>)
                }
            </div>
        </div>
    </>);
}

export {
    UtilBoxView
}